<template>
	<view class="loading">
		<!-- 
		 属性说明
		 属性名	类型	默认值	说明
		 title	String	-	标题文字
		 left-text	String	-	右侧按钮文本
		 right-text	String	-	右侧按钮文本
		 left-icon	String	-	左侧按钮图标（图标类型参考 Icon 图标 type 属性）
		 right-icon	String	-	右侧按钮图标（图标类型参考 Icon 图标 type 属性）
		 fixed	Boolean	false	是否固定顶部
		 status-bar	Boolean	false	是否包含状态栏，
		 shadow	Boolean	true	导航栏下是否有阴影
		 color	String	#000000	图标和文字颜色
		 background-color	String	#FFFFFF	导航栏背景颜色(支持渐变色)
		 -->
		 <!-- 
		  插槽说明
		  开发者使用 NavBar 时，支持向 NavBar 里插入不同内容，以达到自定义的目的。
		  
		  slot名	说明
		  left	向导航栏左侧插入
		  right	向导航栏右侧插入
		  default	向导航栏中间插入
		  <uni-nav-bar>
			  <view>标题栏</view>
			  <view slot="left">left</view>
			  <view slot="right">right</view>
		  </uni-nav-bar>
		  -->
		<uni-nav-bar
			left-icon="back"
			left-text=""
			right-text="菜单"
			title="预加载loading"
			color="#fff"
			background-color="linear-gradient(to right, #1da7ff , #007AFF)"
			fixed="true"
			@clickLeft="back"
			@clickRight="menu"
			status-bar="true"
			>
		</uni-nav-bar>
		<view class="btn" @click="open('show')">打开</view>
		<view style="height: 100rpx;text-align: center;" v-for="(a,i) in 20" :key="i">
			我是一条数据哟
		</view>
		<loading :time="time"  ref="show"></loading>
	</view>
</template>

<script>
	import loading from '@/components/loading/loading.vue'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default{
		components:{
			loading,uniNavBar
		},
		data(){
			return{
				show:false,
				time:'.3s',
			}
		},
		mounted() {
			this.$refs['show'].show = true
			setTimeout(()=>{
				this.$refs['show'].show = false
			},2000)
		},
		methods:{
			open(e,s){
				this.$refs[e].show = true
				setTimeout(()=>{
					this.$refs[e].show = false
				},2000)
			},
			back(){
				uni.navigateBack()
			},
			menu(){
				console.log("点击了菜单")
			}
			
		}
		
	}
</script>

<style>
	.btn{
		width: 400rpx;
		background: #007AFF;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		color: #FFFFFF;
		margin: auto;
		margin-top: 100rpx;
	}
</style>
